<template>
  <div class="page">
    <global-header title="子账号管理" @back="$router.back()" >
      <template #right>
        <div @click="handleAddSub" class="row-start-center mr-[2px] text-[12px] relative right-[10px]">
          <img :src="addImg" class="w-[12px] h-[12px] mr-[2px]" alt="">
          <div>添加子账号</div>
        </div>
      </template>
    </global-header>
    <main class="page-main">
      <div class="h-[60px] bg-white">
        <van-search @search="handleSearch" @clear="handleSearch" @click-left-icon="handleSearch"   v-model="searchParams.Name" placeholder="请输入玩家用户名/昵称/备注" shape="round" />
      </div>
      <div class="bg-white mt-[10px]">
        <!-- 表格部分 -->
         <!-- 表头 -->
         <div class="row-start-center text-[14px] text-[#888] pt-[12px] pb-[10px]  px-[15px]" style="border-bottom: 1px solid #E4E4E4;">
          <div class="w-[30%]">用户名</div>
          <div class="w-[25%]">备注</div>
          <div class="w-[25%]">账号状态</div>
          <div class="w-[20%]">操作</div>
         </div>
         <!-- 表内容 -->
        <div class="page-main overflow-y-auto" ref="scrollRef">
          <div class="bg-white px-[15px]">
            <scroll-list
              emptyImage
              v-model:loading="state.loading"
              v-model:refresh="state.refresh"
              :finished="state.finished"
              :length="list.length"
              @load="load"
            >
              <template v-for="(item, index) in list">
                <SubItem
                  :item="item"
                  :last="index >= list.length - 2"
                  @more="() => handleMore(item)"
                  @status="() => handleStatus(item)"
                >
                </SubItem>
              </template>
            </scroll-list>
          </div>
        </div>
      </div>
    </main>
  </div>
  <SubMorePopup
    ref="subMorePopupRef"
    :info="subInfo"
    :listData="listData"
    @update="handleRefresh"
  />
  <SubStatusPopup
    ref="subStatusPopupRef"
    :uid="subInfo?.Id || null"
    @update="handleUpdate"
  />
</template>
<route>
  {
    name: "admin-user-sub",
    meta: {
      pageIndex: 3,
    }
  }
</route>
<script setup lang="ts">
import SubItem from "./components/sub/sub-item.vue"
import SubMorePopup from "./components/sub/sub-more-popup.vue";
import SubStatusPopup from "./components/sub/sub-status.popup.vue";
import { useList } from "@/hooks/useList";
import addImg from '@/assets/images/add.png'
import {  reqUserSubAccountsList, reqUserSubAccountsPerms } from '@/api/user'
import { cloneDeep, debounce } from "lodash-es";
interface Params {
  Name?: string;
}
const subMorePopupRef = ref()
const subStatusPopupRef = ref()
const subInfo = ref<SubAccountMo | null>(null)


const searchParams = reactive({
  Name:''
})
const listData = ref<any>({})


const getParams = () => {
  const params = {
    Name: ''
  }
  if(searchParams.Name){
    params.Name = searchParams.Name
  }
  return params
}
// 获取列表
const { scrollRef, state, list, getData, search, load } = useList<SubAccountMo, Params>(
  reqUserSubAccountsList,
  getParams
);

const handleSearch = debounce(() => {
  search();
}, 500);


onMounted(()=>{
  getData()
})

function handleMore(item: SubAccountMo){
  subInfo.value = item
  nextTick(()=>{
    subMorePopupRef.value?.open()
  })
}

function handleStatus(item: SubAccountMo){
  subInfo.value = item
  nextTick(()=>{
    subStatusPopupRef.value?.open()
  })
}

function handleAddSub(item: SubAccountMo){
  nextTick(()=>{
    subMorePopupRef.value?.handleOperate()
  })
}

function handleUpdate(uid: number, status: number){
  const arr = cloneDeep(list.value);
  arr.forEach(jtem => {
    if (jtem.Id == uid) {
      jtem.IsUsed = status;
    }
  });
  list.value = cloneDeep(arr);
}

const getPermsData = async () => {
  try {
    const res = await reqUserSubAccountsPerms();
    listData.value.menuPerms = res.data
      .filter(item => item.MType == 0)
      .map(item => ({ ...item, Checked: false }));
      listData.value.applyPerms = res.data
      .filter(item => item.MType == 1)
      .map(item => ({ ...item, Checked: false }));
    const edits = res.data
      .filter(item => item.MType == 2)
      .map(item => ({ ...item, Checked: false }));
    edits.sort((a, b) => a.Sort - b.Sort);
    listData.value.editPerms = edits;
  } catch (error) {}
};

const handleRefresh = () => {
  getData()
}
onMounted(() => {
  getPermsData()
})
</script>

<style scoped>
.action-sheet{
  position: fixed;
  right: 20px;
  top: 100px;
  background-color: #fff;
  padding: 0 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
